import React, {PureComponent} from 'react'
import { BoardImg, BoardWrapper } from '../style'
import { connect } from 'react-redux'
import { Link } from 'react-router-dom'
class Board extends PureComponent{
    render(){
        const {boardList} = this.props;
        return(
            <div>
                <BoardWrapper>
                    {
                    boardList.map((items) => {
                        return( 
                            <Link to= {'/board/' + items.get("id")}>
                                <BoardImg key = {items.get('id')} >
                                    <img alt = '' className = 'board-img' src = {items.get('urlImg')} />
                                </BoardImg>
                            </Link>
                            
                        )
                    })
                    }
                  {/* <BoardImg> </BoardImg>
                  <BoardImg> </BoardImg>
                  <BoardImg> </BoardImg>
                  <BoardImg> </BoardImg>
                  <BoardImg> </BoardImg> */}
                </BoardWrapper>   
            </div>
        )
    }
}
const mapState = (state) => ({
  boardList: state.getIn(['home', 'boardList'])
})
export default connect(mapState, null)(Board);